<template>
  <div class="main" :class="secordMenu == 1 ? '' : 'main2'">
    <div
      class="item"
      :class="item.active ? 'item-active' : ''"
      v-for="(item, index) in dataSource"
      :key="item.key"
      @click="handleItem(item, index)"
    >
      <img class="jiao" v-if="item.active" src="@/assets/home/jiao.png" />
      <img class="img" v-if="item.active" src="@/assets/home/title.png" />
      {{ item.label }}
    </div>
  </div>
</template>

<script>
export default {
  props: {
    dataSource: {
      type: Array,
      default: []
    },
    secordMenu: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      active: null
    };
  },
  methods: {
    handleItem(item, index) {
      this.$emit('handleEdit', item, true);
    }
  }
};
</script>

<style scoped lang="scss">
.main {
  width: 200px;
  background: #01112e;
  padding: 8px 8px;
  border-radius: 4px;
  font-size: 16px;
  .item {
    height: 48px;
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    background: rgba(22, 102, 240, 0.2);
    padding-left: 12px;
    border-radius: 4px;
    position: relative;
    .jiao {
      position: absolute;
      left: -5px;
      top: -5px;
      width: 20px;
      height: 20px;
    }
    .img {
      width: 48px;
      height: 48px;
      position: absolute;
      left: 0;
      top: 0;
    }
  }
  .item-active {
    background: linear-gradient(90deg, rgba(22, 102, 240, 0.6) 0%, rgba(22, 102, 240, 0) 100%);
  }
  .item:last-child {
    margin: 0;
  }
}
.main2 {
  width: 280px;
}
</style>
